<!-- 顾问选择弹窗 -->
<template>
  <u-popup :modelValue="show" mode="bottom" border-radius="30" height="720" closeable close-icon-size="24"
    @close="emit('close')">
    <view class="relative">
      <!-- <z-paging-list ref="list" v-model="state.list" height="800" :loading-more-enabled="false" safe-area-inset-bottom
        @loadData="refresh">
        <template #top> -->
      <view class="text-32 c-#333 text-center py-3 bg-white z-2">顾问列表({{ state.list.length }}人)</view>
      <view class="pl-4 c-#999 text-28">至少添加一位顾问</view>
      <!-- </template> -->
      <view v-if="state.list && state.list.length > 0" class="px-4 pb-20">
        <view v-for="(item, index) in state.list" :key="index" class="flex items-center py-4"
          :class="[item.user_id == userInfo.id ? 'opacity-70' : '']" @click="onItemClick(item)">
          <view class="flex-1 flex items-center">
            <u-checkbox :modelValue="item.selected" :disabled="item.user_id == userInfo.id" shape="circle"
              active-color="#F4AF22" />
            <u-image shape="circle" width="60" height="60" :src="item.user?.avatar"></u-image>
            <view :style="{ backgroundColor: tagColor[item.member_position - 1] }" class="w-60 h28 rounded-sm text-20 c-#fff flex justify-center items-center ml-3 mr-2">{{ formatIdentity(item.member_position) }}
            </view>
            <view class="text-28 c-#333 text-single w-260">{{ item.user?.nickname }}</view>
          </view>
          <view v-if="item.user_id == userInfo.id" class="flex-shrink-0">不能向自己提问</view>
        </view>
      </view>
      <!-- </z-paging-list> -->
      <view class="bottom-wrap-16 w-full px-4 bg-white">
        <view class="bg-#F4AF22 rounded-md c-#fff h-68 text-28 flex justify-center items-center" @click="onConfirmClick">
          确认
        </view>
      </view>
    </view>
  </u-popup>
</template>

<script setup name="address-select-pop">
import { formatIdentity } from '@/common/util/util'
import { getMemberCounselorList } from "@/common/http/module/society.js";
import { useUserStore } from '@/store/user'

const userStore = useUserStore()

const emit = defineEmits(['close', 'confirm']);
const props = defineProps({
  show: {
    type: Boolean,
    default: false,
  },
  club_id: [Number, String]
});

// const list = ref();
const state = reactive({
  list: [],
});

// 身份标签颜色 1-顾问 2-管理员 3-社长 
const tagColor = ['#F8DC61', '#6FC9E7', '#F4AF22']

const userInfo = computed(() => userStore.userInfo)

function refresh () {
  getMemberCounselorList(props.club_id).then(res => {
    state.list = res.data
    // list.value.onLoadResult(res.data.counselor || []);
  })
}

function onItemClick (val) {
  if (val.user_id == userInfo.value.id) return
  val.selected = !val.selected
}

function onConfirmClick () {
  const selectedItem = state.list.filter((item) => item.selected);
  console.log('adviser confirm', selectedItem);
  emit('confirm', selectedItem);
  emit('close');
}

onMounted(() => refresh());

defineExpose({ refresh });
</script>

<style lang="scss" scoped>
.btn-see {
  flex-shrink: 0;
  padding: 6rpx 10rpx;
  border-radius: 32rpx;
  font-weight: 400;
  font-size: 22rpx;
  color: #369c49;
  text-align: center;
  border: 2rpx solid #369c49;
}

.btn {
  flex: 1;
  margin: 0 15rpx;
  padding: 22rpx 32rpx;
  font-weight: 400;
  font-size: 32rpx;
  color: #fff;
  text-align: center;
}

.btn-add {
  border-radius: 60rpx;
  background: rgba(54, 156, 73, 0.1);
  color: #369c49;
}

.btn-confirm {
  border-radius: 60rpx;
  background: linear-gradient(135deg, rgba(117, 215, 1, 1) 0%, rgba(54, 156, 73, 1) 100%);
}
</style>
